var StudentMsgPage=React.createClass({
	getInitialState:function(){
		return {
			level:0,
			problemIdForDetail:"",//所显示的问题详情
			activePage:0,//0代表学员信息，1代表学员评论
			problems:null, 
			problems_loaded:false,
			comments:null ,
			comments_loaded:false
		};

	},
	componentDidMount:function(){
		
	  $.ajax({
	    url:config.api.getAllStudentProblem[0].replace(/\<\w+\>/,this.props.studioId),
	    type:config.api.getAllStudentProblem[1],
	    data:{
	    	aType :1//1表示“学员提问”，2表示“画作点评”
	    },
	    success:function(d){
	      console.log(d);
	      this.setState(
	            {
	              problems:d.problems,
	              problems_loaded:true
	            }
	        );
	    }.bind(this),
	    error:function(e) {
	      alert("获取学员提问失败")
	    }
	  });//加载学员问题
	  $.ajax({
	    url:config.api.getAllStudentComment[0].replace(/\<\w+\>/,this.props.studioId),
	    type:config.api.getAllStudentComment[1],
	    data:{
	    	// total :-1
	    },
	    success:function(d){
	      console.log("评论",d);
	      this.setState(
	            {
	              comments:d.studioComments,
	              comments_loaded:true
	            }
	        );
	    }.bind(this),
	    error:function(e) {
	      alert("获取学员评论失败")
	    }
	  });//加载学员评论
	},
	toProblemDetail:function(problemId) {
		this.setState({
			level:1,
			problemIdForDetail:problemId
		});
	},
	setActivePage:function(page) {
		this.setState({activePage:page});
	},
	reloadProblemList:function(){
		$.ajax({
		  url:config.api.getAllStudentProblem[0].replace(/\<\w+\>/,this.props.studioId),
		  type:config.api.getAllStudentProblem[1],
		  success:function(d){
		    console.log(d);
		    this.setState(
		          {
		            problems:d.problems,
		            problems_loaded:true
		          }
		      );
		  }.bind(this),
		  error:function(e) {
		    alert("获取学员信息失败")
		  }
		});//加载学员问题
	},
	reloadCommentsList:function(){
		$.ajax({
		  url:config.api.getAllStudentComment[0].replace(/\<\w+\>/,this.props.studioId),
		  type:config.api.getAllStudentComment[1],
		  success:function(d){
		    console.log(d);
		    this.setState(
		          {
		            comments:d.studioComments,
		            comments_loaded:true
		          }
		      );
		  }.bind(this),
		  error:function(e) {
		    alert("获取学员评论失败")
		  }
		});//加载学员评论
	},
	render:function() {
		if(this.state.problems_loaded&&this.state.comments_loaded){
			var list=this.state.activePage?<StudentCommentList  comments={this.state.comments} studioId={this.props.studioId} reload={this.reloadCommentsList}/>:<StudentProblemList  toProblemDetail={this.toProblemDetail} problems={this.state.problems} studioId={this.props.studioId} reload={this.reloadProblemList}/>;
			return (
				<div id="StudentMsgPage">
					<StudentMsgToolBar activePage={this.state.activePage} setActivePage={this.setActivePage} commentAmount={this.state.comments.length}/>
					{list}
				</div>
				);
		}else{
			return (
				<div id="StudentMsgPage">
					<StudentMsgToolBar activePage={this.state.activePage} setActivePage={this.setActivePage} commentAmount={this.state.comments? this.state.comments.length: 0}/>
					<p>学员信息加载中</p>
				</div>
				);
		}

	}
});
var StudentMsgToolBar=React.createClass({
	switchToProblems:function(e) {
		this.props.setActivePage(0);
	},
	switchToComments:function(e) {
		this.props.setActivePage(1);
	},
	render:function(){
			return (
				<div id="StudentMsgToolBar">
					<div className={this.props.activePage==0?"toolBarBtn active":"toolBarBtn"} id="switchToProblems" onClick={this.switchToProblems}>
						<span>学员信息</span>
					</div>
					<div className={this.props.activePage==1?"toolBarBtn active":"toolBarBtn"} id="switchToComments" onClick={this.switchToComments}>
						<span>学员评论（{this.props.commentAmount}）</span>
					</div>
				</div>
				);
	}
});
//提问
var StudentProblemList=React.createClass({
	getInitialState:function(){
		return (
			{
				answerTo:""//要回答的问题的id
			}
			);
	},
	answerTo:function(id){
		console.log(id);
		this.setState({
			answerTo:id
		});
	},
	publishAnswer:function(){
		var answer=$("#answerTextarea").val();
		$.ajax({
			url:config.api.answerProblem[0].replace(/\<\w+\>/,this.props.studioId),
			type:config.api.answerProblem[1],
			data:{
				content:answer,
				problemId:this.state.answerTo
			},
			success:function(){
				alert("回答成功");
				$("#answerTextarea").val("");
				$('#answerModal').modal('hide');
				this.props.reload();//刷新
				
			}.bind(this),
			error:function(){
				alert("回答失败");
			}
		});
	},
	itemClickHandler:function(e) {
		var $target=$(e.target);
		var id=$target.data("id");//获取问题id
		//this.props.toProblemDetail(id);//跳转到问题详情
	},
	render:function(){
		var self=this;
		return (
				<div id="StudentProblemList">
					{this.props.problems.map(function(problem) {
						return (<StudentProblemItem answerTo={self.answerTo} problem={problem} />);
					})}
					<div className="modal fade" id="answerModal" tabindex="-1" role="dialog" aria-labelledby="answerModalLabel" aria-hidden="true">
					  <div className="modal-dialog">
					    <div className="modal-content answerContainer">
					    	<textarea id="answerTextarea" placeholder="在此输入回答"></textarea>
					        <div className="actionBtns">
					          <button className="btn btn-primary btn-md" id="publishAnswerBtn" onClick={this.publishAnswer}>确定</button>     
					        </div>
					    </div>
					  </div>
					</div>
				</div>
			);


		
	}
});
var StudentProblemItem=React.createClass({
	componentDidMount:function() {
		// var $img=$(".studentProblem").find(".left-col>img");
		// var w=$img.width();
		// $img.height(w);//使头像长等于宽
	},
	formatDate:function(timestamp){  
	              var dateObj=new Date(timestamp);   
	              var   year=dateObj.getYear()+1900;     
	              var   month=dateObj.getMonth()+1;     
	              var   date=dateObj.getDate();     
	              var   hour=dateObj.getHours();     
	              var   minute=dateObj.getMinutes();       
	              return   year+"-"+month+"-"+date+"   "+hour+":"+(minute<10?"0"+minute:minute);     
	}, 
	replyHandler:function(e){
		var id=$(e.target).data("problemid");
		this.props.answerTo(id);
	},
	render:function(){
		var image;
		if(this.props.problem.image!=""){
			image=<div className="paintings">
			      	<img src={this.props.problem.image}/>
			      </div>;
		}else{
			image=<div className="paintings">
			      </div>;
		};
		return (
			<div className="studentProblem" >
			  <div className="left-col">
			    <div className="avatarWrapper">
			      <img src={this.props.problem.avatarUrl}/>
			    </div>
			    <div className="triangle"></div>
			  </div> 
			  <div className="right-col">
			    <div className="problem-details">
			      <h5>{this.props.problem.name}</h5>
			      <h6>{this.formatDate(this.props.problem.timestamp)}</h6>
			      <h5>{this.props.problem.content}</h5>
			      {image}
			      <span className="reply" onClick={this.replyHandler} data-problemid={this.props.problem.problemId} data-toggle="modal" data-target="#answerModal">回复</span>

			    </div>
			  </div> 
			</div>
			);
	}
});	
//评论
var StudentCommentList=React.createClass({
	getInitialState:function(){
		return (
			{
				replyTo:""//要回答的评论的id
			}
			);
	},
	replyTo:function(id){
		console.log(id);
		this.setState({
			replyTo:id
		});
	},
	publishReply:function(){
		var reply=$("#answerTextarea").val();
		$.ajax({
			url:config.api.replyToComment[0].replace(/\<studio_id\>/,this.props.studioId).replace(/\<studio_comment_id\>/,this.state.replyTo),
			type:config.api.replyToComment[1],
			data:{
				reply:reply,
			},
			success:function(){
				alert("回复成功");
				$("#answerTextarea").val("");
				$('#answerModal').modal('hide');
				this.props.reload();//刷新
				
			}.bind(this),
			error:function(){
				alert("回复失败");
			}
		});
	},
	render:function(){
		var self=this;
		return (
				<div id="StudentProblemList">
					{this.props.comments.map(function(comment) {
						return (<StudentCommentItem comment={comment} replyTo={self.replyTo} reload={self.props.reload}/>);
					})}
					<div className="modal fade" id="answerModal" tabindex="-1" role="dialog" aria-labelledby="answerModalLabel" aria-hidden="true">
					  <div className="modal-dialog">
					    <div className="modal-content answerContainer">
					    	<textarea id="answerTextarea" placeholder="在此输入回答"></textarea>
					        <div className="actionBtns">
					          <button className="btn btn-primary btn-md" id="publishAnswerBtn" onClick={this.publishReply}>确定</button>     
					        </div>
					    </div>
					  </div>
					</div>
				</div>

			);
		
	}
});
var StudentCommentItem=React.createClass({
	formatDate:function(timestamp){  
	              var dateObj=new Date(timestamp);   
	              var   year=dateObj.getYear()+1900;     
	              var   month=dateObj.getMonth()+1;     
	              var   date=dateObj.getDate();     
	              var   hour=dateObj.getHours();     
	              var   minute=dateObj.getMinutes();       
	              return   year+"-"+month+"-"+date+"   "+hour+":"+(minute<10?"0"+minute:minute);     
	}, 
	deleteHandler:function(e){
		var c=confirm("确定删除?");
		if(!c) return;
		var commentId=$(e.target).data("commentid");
		$.ajax({
			url:config.api.deleteComment[0].replace(/\<studio_id\>/,this.props.studioId).replace(/\<studio_comment_id\>/,commentId),
			type:config.api.deleteComment[1],
			success:function(){

				this.props.reload();//刷新
				
			}.bind(this),
			error:function(){
				alert("删除失败");
			}
		});
	},
	replyHandler:function(e){
		var commentid=$(e.target).data("commentid");
		this.props.replyTo(commentid);
	},
	render:function(){
		return (
			<div className="studentProblem" >
			  <div className="left-col">
			    <div className="avatarWrapper">
			      <img src={this.props.comment.fromUserAvatarUrl}/>
			    </div>
			    <div className="triangle"></div>
			  </div> 
			  <div className="right-col">
			    <div className="problem-details">
			      <h5>{this.props.comment.fromUserName}</h5>
			      <h6>{this.formatDate(this.props.comment.timestamp)}</h6>
			      <h5>{this.props.comment.content}</h5>
			      <span className="delete" onClick={this.deleteHandler} data-commentid={this.props.comment._id}>删除</span>
			      <span className="reply" onClick={this.replyHandler} data-commentid={this.props.comment._id} data-toggle="modal" data-target="#answerModal">回复</span>
			      <p>{this.props.comment.reply?"回复:"+this.props.comment.reply:""}</p>
			    </div>
			  </div> 
			</div>
			);
	}
});